import React, { memo, forwardRef, useImperativeHandle, useEffect, useState } from 'react'
import './index.scss'

const LdContent = forwardRef((props: any, ref: any) => {
    const { showHeader = true } = props
    const [height, setHeight] = useState<string>('100%')
    const headerSlot: Array<any> = []
    const contentSlot: Array<any> = []
    const slotList = React.Children.toArray(props?.children)
    slotList.map((item: any) => {
        const { slotName } = item.props
        switch (slotName) {
            case 'header':
                headerSlot.push(item)
                break
            case 'content':
                contentSlot.push(item)
                break
        }
    })
    useEffect(() => {
        if (showHeader) return setHeight('100%')
        setHeight('calc(100% - 37px - 12px)')
    }, [showHeader])
    return (
        <>
            <div className="w100 h100 ld-content">
                {
                    showHeader ?
                        <div className="header">
                            {headerSlot.map((item: any, index: number) => {
                                return <div key={index}>{item}</div>
                            })}
                        </div>
                        : null
                }
                <div className="main-content" style={{ height: `${height}` }}>
                    {contentSlot.map((item: any, index: number) => {
                        return <div key={index}>{item}</div>
                    })}
                </div>
            </div>
        </>
    )
})
export default memo(LdContent)